<template>
  <div class='container'>
    <!-- 头部输入 -->
    <el-card>
      <el-row>
        <el-col :span="20">
          <el-form :inline="true">
            <el-form-item label="学科名称">
              <el-input placeholder="请输入学科名称" v-model="pageForm.subjectName" />
            </el-form-item>
            <el-form-item>
              <el-button @click="pageForm.subjectName = ''">清除</el-button>
              <el-button type="primary" @click="searchSubjects">查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4" style="text-align:right">
          <el-button type="success" icon="el-icon-edit" @click="isShow=true">新增学科</el-button>
        </el-col>
      </el-row>
      <!-- 提示 -->
      <el-alert
        style="margin-bottom:20px"
        :title="`一共有${pageForm.counts}条数据`"
        type="info"
        show-icon
        :closable="false"
      />
      <!-- 表格 -->
      <el-table style="width: 100%" :data="list" v-loading="loading">
        <el-table-column label="序号" type="index" width="50px" :index="indexFn" />
        <el-table-column label="学科名称" prop="subjectName" width="100px" />
        <el-table-column label="创建者" prop="username" />
        <el-table-column label="创建日期" prop="addDate">
          <template #default="{ row }">
            <span>{{ row.addDate | parseTimeByString }}</span>
          </template>
        </el-table-column>
        <el-table-column label="前台是否显示" prop="isFrontDisplay">
          <template #default="{row}">{{row.isFrontDisplay===1?'是':'否'}}</template>
        </el-table-column>
        <el-table-column label="二级目录" prop="twoLevelDirectory" />
        <el-table-column label="标签" prop="tags" />
        <el-table-column label="题目教程" prop="totals" width="100px" />
        <el-table-column label="操作" width="250px">
          <template #default="{row}">
            <el-button type="text" size="small" @click="$router.push(`directorys?id=${row.id}&name=${row.subjectName}`)">学科分类</el-button>
            <el-button type="text" size="small" @click="$router.push(`tags?id=${row.id}&name=${row.subjectName}`)">学科标签</el-button>
            <el-button type="text" size="small" @click="editSubjects(row)">修改</el-button>
            <el-button type="text" size="small" @click="delSubjects(row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>

      <!-- 分页器 -->
      <el-pagination
        style="margin-top:20px;text-align:right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageForm.page"
        :page-sizes="[1,2,3,4,5,6,7,8,9,10]"
        :page-size="pageForm.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageForm.counts"
      />

    </el-card>
    <subjects-add ref="subject" :isShow.sync="isShow" @refresh="getSubjects" />
<<<<<<< HEAD
=======

>>>>>>> develop
  </div>
</template>

<script>
import { list, detail, remove } from '../../api/hmmm/subjects'
import subjectsAdd from '../components/subjects-add.vue'
export default {
  components: { subjectsAdd },
  data () {
    return {
      list: [],
      pageForm: {
        page: 1, // 页数
        pagesize: 10, // 每页条数
        subjectName: '', // 学科名称
        counts: 0// 总条数

      },
      loading: false, // 加载,
      isShow: false
    }
  },
  // import { list } from '../../api/hmmm/subjects'
  // export default {
  // data () {
  //   return {
  //     formData: {
  //       text: ''
  //     },
  //     list: [],
  //     page: {
  //       page: 1, // 页数
  //       pagesize: 5, // 每页条数
  //       subjectName: null, // 学科名称
  //       counts: 0// 总条数

  //     },
  //     loading: false// 加载
  //   }
  // },
  created () {
    this.getSubjects()
  },
  methods: {
    // 获取数据列表
    async getSubjects () {
      this.loading = true
      const { data: { counts, items } } = await list(this.pageForm)
      // console.log(res)
      this.list = items
      this.pageForm.counts = counts
      // const { data: { counts, items } } = await list(this.page)
      // console.log(res)
      this.list = items
      // this.pageForm.counts = counts
      this.loading = false
    },
    // 修改条数
    handleSizeChange (val) {
      this.pageForm.pagesize = val
      this.pageForm.page = 1
      // this.pageForm.pagesize = val
      // this.pageForm.page = 1
      this.getSubjects()
    },
    // 修改页数
    handleCurrentChange (val) {
      // this.pageForm.page = val
      this.pageForm.page = val
      this.getSubjects()
    },
    // 序号变化
    indexFn (index) {
      return index + 1 + this.pageForm.pagesize * (this.pageForm.page - 1)
    },
    // 编辑修改
    async editSubjects (data) {
      this.isShow = true
      const res = await detail(data)
      this.$refs.subject.form = res.data
    },
    // 查询
    searchSubjects () {
      if (this.pageForm.subjectName === '') {
        this.$message.error('输入内容不能为空')
      }
      this.pageForm.page = 1
      this.getSubjects()
    },
    // 删除
    delSubjects (data) {
      this.$confirm('你确定要删除该学科吗？', '温馨提示')
        .then(async () => {
          await remove(data)
          this.$message.success('删除学科成功')
          if (this.list.length === 1 && this.pageForm.page > 1) {
            this.pageForm.page--
          }
          this.getSubjects()
        })
        .catch(() => {
          this.$message.error('删除失败!')
        })
      // return index + 1 + this.page.pagesize * (this.page.page - 1)
    }
  }
}
</script>

<style scoped lang='scss'>
  ::v-deep {
    .el-card{
      margin: 10px;
      padding: 10px;
    }
  }
</style>
